<template>
  <div
    class="app-container"
    style="overflow: hidden;border-left:1px solid #e6ebf5;border-right:1px solid #e6ebf5; width: 96%;margin-left: 2%;padding-left: 0;padding-right: 0;"
  >
    <el-steps :active="active" align-center finish-status="success" simple>
      <el-step :title="activeStr"></el-step>
      <el-step title="维护教材内容"></el-step>
      <!-- <el-step title="预览发布"></el-step> -->
    </el-steps>

    <div v-if="active==0" style="margin-top: 28px;">
      <!-- 创建封面 -->
      <el-form
        :model="courseModel"
        ref="courseModel"
        :rules="courserules"
        label-width="130px"
        label-position="right"
        style="width: 90%;"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="课程名称" prop="title">
              <el-input v-model="courseModel.title" placeholder="课程名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="课程图片" prop="CoverUrl">
              <el-upload
                class="avatar-uploader"
                id="uploadimginput"
                :action="actionUrl"
                :show-file-list="false"
                :on-success="handleCourseAvatarSuccess"
                :before-upload="beforeCourseAvatarUpload"
              >
                <img v-if="courseModel.CoverUrl" :src="courseModel.CoverUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="课程简介" prop="SubTitle">
              <el-input v-model="courseModel.SubTitle" placeholder="课程简介" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="序号" prop="SortNum">
              <el-input-number
                v-model="courseModel.SortNum"
                style="width: 100%;"
                :step="1"
                step-strictly
                :min="0"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="课程描述" prop="Description">
              <el-input
                :autosize="{ minRows: 4, maxRows: 9}"
                v-model="courseModel.Description"
                type="textarea"
                placeholder="课程描述"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div style="text-align:right;margin-top: 10px;">
        <el-button type="danger" @click="resetCourse">重置</el-button>
        <el-button type="primary" @click="confirmCourseModel">保存</el-button>
      </div>
    </div>

    <div v-if="active==1" style="margin-top: 28px;">
      <!-- 维护教材内容 -->
      <el-row>
        <el-col :span="11">
          <el-table
            :data="modelList"
            style="width: 100%;"
            height="1040"
            row-key="id"
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            :header-cell-style="{background:'#eef1f6',color:'#606266',height:'55px'}"
          >
            <el-table-column prop="title" label="名称" width="800">
              <template slot-scope="scope">{{ scope.row.title }}</template>
            </el-table-column>
            <el-table-column align="center" width="200" label="操作" fixed="right">
              <template slot-scope="scope">
                <el-button
                  :disabled="scope.row.id.indexOf('id')>-1"
                  type="text"
                  size="mini"
                  v-if="scope.row.ParentCSID!='00000000-0000-0000-0000-000000000000'"
                  @click="handleEdit(scope)"
                  icon="el-icon-edit"
                >编辑</el-button>
                <el-button
                  :disabled="scope.row.id.indexOf('id')>-1"
                  v-if="scope.row.ParentCSID=='00000000-0000-0000-0000-000000000000'"
                  type="text"
                  size="mini"
                  @click="handleAdd(scope)"
                  icon="el-icon-plus"
                >添加</el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click="handleDelete(scope)"
                  v-if="scope.row.ParentCSID!='00000000-0000-0000-0000-000000000000'"
                  icon="el-icon-delete"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="13">
          <el-card
            class="box-card"
            shadow="never"
            style="border:none;border-left:1px solid #e6ebf5; "
          >
            <div slot="header" class="clearfix">
              <span>课程信息</span>
            </div>
            <div class="text item">
              <el-form
                :model="model"
                ref="model"
                :rules="rules"
                label-width="140px"
                label-position="right"
              >
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="父级名称" prop="ParentName">
                      <el-input v-model="model.ParentName" placeholder="父级名称" disabled />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="章节名称" prop="title">
                      <el-input v-model="model.title" placeholder="章节名称" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="章节封面" prop="CoverUrl">
                      <el-upload
                        class="avatar-uploader"
                        :action="actionUrl"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                      >
                        <img v-if="model.ShowCoverUrl" :src="model.ShowCoverUrl" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="简介" prop="SubTitle">
                      <el-input v-model="model.SubTitle" placeholder="简介" />
                    </el-form-item>
                  </el-col>
                  <!-- <el-col :span="12">
                    <el-form-item label="选择讲师" prop="TeacherId">
                      <el-select v-model="model.TeacherId" filterable placeholder="请选择" style="width: 100%;">
                        <el-option v-for="item in teacherList" :key="item.UserId" :label="item.UserName"
                          :value="item.UserId">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>-->
                </el-row>
                <!-- <el-row>
                  <el-col :span="24">
                    <el-form-item label="选择等级" prop="LevelId">
                      <el-cascader v-model="model.LevelId" :options="levelList" style="width: 80%;"
                        :props="{ checkStrictly: true, emitPath: false ,expandTrigger: 'hover'}" filterable clearable>
                      </el-cascader>
                      &nbsp;
                      <el-button type="text" size="mini" @click="oprateCourseLevel" style="width: 10%;">维护等级</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>-->
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="序号" prop="SortNum">
                      <el-input-number
                        v-model="model.SortNum"
                        style="width: 100%;"
                        :step="1"
                        step-strictly
                        :min="0"
                      ></el-input-number>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="描述" prop="Description">
                      <el-input
                        :autosize="{ minRows: 4, maxRows: 9}"
                        v-model="model.Description"
                        type="textarea"
                        placeholder="描述"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="视频地址" prop="MainResourceUrl">
                      <el-input
                        style="width: 70%;float: left;"
                        v-model="model.MainResourceUrl"
                        ref="videoaddress"
                        placeholder="视频地址"
                      />
                      <span ref="progressLabel"></span>
                      <el-upload
                        class="avatar-uploader"
                        :action="mainActionUrl"
                        :show-file-list="false"
                        :on-success="handleMainSuccess"
                        :before-upload="beforeMainUpload"
                      >
                       
                        <el-button type="primary" size="mini" >上传视频</el-button>
                      </el-upload>
                    </el-form-item>

                    <input type="text" ref="fileId" name v-show="false" />
                    <input type="text" ref="videourl" name v-show="false" />
                  </el-col>
                </el-row>
                <!-- <el-row>
                  <el-col :span="20">
                    <el-divider content-position="center">附件列表</el-divider>
                  </el-col>
                  <el-col :span="4">
                    <el-divider content-position="right">
                      <el-upload class="avatar-uploader" :action="actionUrl" :show-file-list="false"
                        :on-success="handleAttachSuccess"  :before-upload="beforeAttachUpload">
                        <el-button type="primary" size="mini">添加附件</el-button>
                      </el-upload>
                    </el-divider>
                  </el-col>
                </el-row>-->

                <!-- 附件列表 -->
                <!-- <el-row>
                  <el-col :span="24">
                    <el-table :data="model.Attachments" style="width: 100%;" height="200" border>
                      <el-table-column prop="AttachmentDIsplayName" label="名称">
                        <template slot-scope="scope">{{ scope.row.AttachmentDIsplayName }}</template>
                      </el-table-column>
                      <el-table-column prop="AttachmentSize" label="大小">
                        <template slot-scope="scope">{{ scope.row.AttachmentSizeStr }}</template>
                      </el-table-column>
                      <el-table-column align="center" width="200" label="操作">
                        <template slot-scope="scope">
                          <el-button type="text" size="mini" @click="removeAttach(scope)" icon="el-icon-delete">删除
                          </el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-col>

                </el-row>-->
              </el-form>
              <div style="text-align:right;margin-top: 10px;">
                <el-button type="danger" @click="reset">重置</el-button>
                <el-button type="primary" @click="confirmModel">保存</el-button>
                <!-- <el-button type="primary" @click="goPublish">去发布</el-button> -->
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 维护等级 -->
    <el-dialog
      width="80%"
      title="维护等级"
      :visible.sync="innerCourseVisible"
      append-to-body
      :close-on-click-modal="false"
      top="3vh"
    >
      <el-row>
        <el-col :span="7">
          <!-- <el-button icon="el-icon-check" size="small" type="primary" @click="addFirstCourseLevel">添加等级</el-button> -->
          <el-button
            icon="el-icon-check"
            size="small"
            type="primary"
            @click="addCourseLevel"
          >添加等级(子节点)</el-button>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px;padding-left: 20px;">
        <el-col :span="7">
          <el-tree
            ref="tree"
            :data="levelList"
            :filter-node-method="filterNode"
            class="filter-tree"
            node-key="id"
            highlight-current
            accordion
            @node-click="getNodeData"
          />
        </el-col>
        <el-col :span="17">
          <el-form
            :model="innerCourseModel"
            ref="innerCourseModel"
            :rules="innerRules"
            label-position="right"
            style="width: 90%;"
          >
            <el-row>
              <el-col :span="24">
                <el-form-item label="父级等级" prop="ParentTitle">
                  <el-input
                    v-model="innerCourseModel.ParentTitle"
                    readonly
                    :disabled="true"
                    placeholder="父级等级"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="等级名称" prop="LevelTitle">
                  <el-input v-model="innerCourseModel.LevelTitle" placeholder="请输入等级名称" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="排序号" prop="SortNum">
                  <el-input-number
                    v-model="innerCourseModel.SortNum"
                    style="width: 100%;"
                    :step="1"
                    step-strictly
                    :min="0"
                  ></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="20">
                <el-divider content-position="center">试卷列表</el-divider>
              </el-col>
              <el-col :span="4">
                <el-divider content-position="right">
                  <el-button
                    type="primary"
                    size="mini"
                    @click="choosePaper(innerCourseModel.PaperIds)"
                  >关联试卷</el-button>
                </el-divider>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-table
                  :data="innerCourseModel.PaperIds"
                  style="width: 100%;"
                  ref="multipleTable"
                  height="300"
                  border
                >
                  <el-table-column label="试卷名称" prop="paper_name">
                    <template slot-scope="scope">{{ scope.row.paper_name }}</template>
                  </el-table-column>
                  <el-table-column label="试卷分数" prop="total_score">
                    <template slot-scope="scope">{{ scope.row.total_score }}</template>
                  </el-table-column>
                  <el-table-column label="试卷难度" prop="paper_difficulty">
                    <template slot-scope="scope">{{ scope.row.paper_difficulty }}</template>
                  </el-table-column>
                  <el-table-column align="center" width="100" label="操作">
                    <template slot-scope="scope">
                      <el-button
                        type="primary"
                        size="mini"
                        @click="viewPaper(scope)"
                        icon="el-icon-tickets"
                      >预览</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </el-form>

          <!-- 选择试卷 -->
          <el-dialog
            :visible.sync="dialogPaperVisible"
            :title="'选择试卷'"
            width="60%"
            top="2vh"
            :close-on-click-modal="false"
            append-to-body
          >
            <el-table
              :data="paperList"
              style="width: 100%;"
              ref="multipleTable"
              height="550"
              border
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column label="试卷名称" sortable="custom" prop="paper_name">
                <template slot-scope="scope">{{ scope.row.paper_name }}</template>
              </el-table-column>
              <el-table-column label="试卷分数" sortable="custom" prop="total_score">
                <template slot-scope="scope">{{ scope.row.total_score }}</template>
              </el-table-column>
              <el-table-column label="试卷难度" sortable="custom" prop="paper_difficulty">
                <template slot-scope="scope">{{ scope.row.paper_difficulty }}</template>
              </el-table-column>
              <el-table-column align="center" width="100" label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="mini"
                    @click="viewPaper(scope)"
                    icon="el-icon-tickets"
                  >预览</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 预览试卷 -->
            <el-dialog
              :visible.sync="viewPaperVisible"
              :title="'试卷详情'"
              width="60%"
              top="2vh"
              :close-on-click-modal="false"
              append-to-body
            >
              <div
                style="height: 50px;line-height: 50px;margin-top: -35px;color: #ff9e8c"
              >{{ subPaperTitle }}</div>
              <div
                style="height: 50px;line-height: 50px;margin-top: -20px;color: #00d2c9"
              >{{ minSubPaperTitle }}</div>
              <el-tree
                ref="paperDataTree"
                :data="paperData"
                :props="defaultProps"
                class="filter-tree"
              />

              <div style="text-align:right;">
                <el-button type="danger" @click="viewPaperVisible=false">关闭</el-button>
              </div>
            </el-dialog>
            <div style="text-align:right;">
              <el-button type="danger" @click="dialogPaperVisible=false">关闭</el-button>
              <el-button type="primary" @click="confirmPaper">提交</el-button>
            </div>
          </el-dialog>

          <div style="text-align:right;margin-top: 20px;">
            <el-button type="danger" @click="innerCourseVisible=false">关闭</el-button>
            <el-button type="primary" @click="confirmCourseLevel">提交</el-button>
          </div>
        </el-col>
      </el-row>
    </el-dialog>

    <div v-if="active==2" style="margin-top: 28px;">
      <!-- 预览发布 -->
      <el-row>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>
              <i class="el-icon-collection-tag"></i>&nbsp;
              <b>课程体系信息</b>
            </span>
          </div>
          <!-- 封面预览 -->
          <el-form
            :model="courseModel"
            label-width="130px"
            label-position="right"
            border
            style="width: 90%;"
          >
            <el-row>
              <el-col :span="24">
                <el-form-item label="课程体系名称" prop="Title">{{courseModel.title}}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="课程体系图片" prop="CoverUrl">
                  <img :src="courseModel.CoverUrl" class="avatar" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="课程体系简介" prop="SubTitle">{{courseModel.SubTitle}}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="等级" prop="LevelId">
                  <el-input v-model="courseModel.LevelName" placeholder="课程体系等级" :disabled="true" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="序号" prop="SortNum">{{courseModel.SortNum}}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="课程体系描述" prop="Description">{{courseModel.Description}}</el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-row>
      <el-row style="margin-top: 20px;border-top:1px solid #e6ebf5;">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>
              <i class="el-icon-collection-tag"></i>&nbsp;
              <b>课程体系内容信息</b>
            </span>
          </div>
          <!-- 章节列表 -->
          <el-col :span="11">
            <el-table
              :data="modelList"
              style="width: 100%;"
              height="1040"
              row-key="id"
              default-expand-all
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
              :header-cell-style="{background:'#eef1f6',color:'#606266',height:'55px'}"
            >
              <el-table-column prop="title" label="名称" width="800">
                <template slot-scope="scope">{{ scope.row.title }}</template>
              </el-table-column>
              <el-table-column align="center" width="200" label="操作" fixed="right">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="mini"
                    v-if="scope.row.ParentCSID!='00000000-0000-0000-0000-000000000000'"
                    @click="handleEdit(scope)"
                    icon="el-icon-document"
                  >查看</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="13">
            <el-card
              class="box-card"
              shadow="never"
              style="border:none;border-left:1px solid #e6ebf5; "
            >
              <div class="text item">
                <el-form :model="model" ref="model" label-width="140px" label-position="right">
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="父级名称" prop="ParentName">{{model.ParentName}}</el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="章节名称">{{model.title}}</el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="章节封面">
                        <img :src="model.CoverUrl" class="avatar" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="简介">{{model.SubTitle}}</el-form-item>
                    </el-col>
                    <!-- <el-col :span="12">
                      <el-form-item label="讲师">
                        <el-select v-model="model.TeacherId" filterable placeholder="请选择" :disabled="true"
                          style="width: 100%;">
                          <el-option v-for="item in teacherList" :key="item.UserId" :label="item.UserName"
                            :value="item.UserId">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>-->
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="选择等级">
                        <el-cascader
                          v-model="model.LevelId"
                          :options="levelList"
                          style="width: 80%;"
                          :disabled="true"
                          :props="{ checkStrictly: true, emitPath: false }"
                        ></el-cascader>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="序号" prop="SortNum">{{model.SortNum}}</el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="描述" prop="Description">{{model.Description}}</el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="主资源" prop="MainResourceUrl">{{model.MainResourceUrl}}</el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-divider content-position="center">附件列表</el-divider>
                    </el-col>
                  </el-row>
                  <el-row>
                    <!-- 附件列表 -->
                    <el-col :span="24">
                      <el-table :data="model.Attachments" style="width: 100%;" height="200" border>
                        <el-table-column prop="AttachmentDIsplayName" label="名称">
                          <template slot-scope="scope">{{ scope.row.AttachmentDIsplayName }}</template>
                        </el-table-column>
                        <el-table-column prop="AttachmentSize" label="大小">
                          <template slot-scope="scope">{{ scope.row.AttachmentSizeStr }}</template>
                        </el-table-column>
                      </el-table>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </el-card>
          </el-col>
        </el-card>
      </el-row>
      <div style="text-align:right;margin-top: 10px;">
        <el-button type="primary" @click="publishCourse">发布</el-button>
        <el-button type="primary" @click="goBack">返回上一层</el-button>
      </div>
    </div>
  </div>
</template>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>

<script src="@/js/courseseries/create.ts">
</script>
